<!--待对账供应商-->
<template>
  <div class="suppliers-container">
    <!-- 筛选区域 -->
    <div class="controls-section">
      <button class="btn-new" @click="showCreate=true">新建供应商</button>
      <div class="filters">
        <div class="filter-item">
          <label>关键词</label>
          <input type="text" v-model="query.supplierName" placeholder="请输入关键词">
        </div>

      </div>
      <div class="actions">
        <button class="btn-primary" @click="fetchList">搜索</button>
        <button class="btn-secondary" @click="resetQuery">重置</button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <table>
        <thead>
          <tr>
            <th><input type="checkbox" v-model="allSelected"></th>
            <th>供应商名称</th>
            <th>供应商编号</th>
            <th>联系人</th>
            <th>联系人职位</th>
            <th>联系电话</th>
            <th>微信</th>
            <th>邮箱</th>
            <th>详细地址</th>

          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in suppliers" :key="index">
            <td><input type="checkbox" v-model="item.selected"></td>
            <td class="link-style" @click="viewDetail(item)">{{ item.supplierName }} </td>
            <td>{{ item.supplierCode }}</td>
            <td>{{ item.contactPersonName || '-' }}</td>
            <td>{{ item.contactPosition || '-' }}</td>
            <td>{{ item.contactPhone || '-' }}</td>
            <td>{{ item.wechat }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.address }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 底部区域 -->
    <div class="footer-section">
      <div class="footer-left">
        <input type="checkbox" v-model="allSelected">
        <label>全选</label>
        <button class="btn-secondary">导出</button>
      </div>
      <div class="pagination">
        <button @click="changePage(page-1)" :disabled="page<=1">&lt;</button>
        <button class="active">{{ page }}</button>
        <button @click="changePage(page+1)" :disabled="page>=pages">&gt;</button>
        <select v-model.number="pageSize" @change="changePageSize">
          <option :value="5">5条/页</option>
          <option :value="10">10条/页</option>
          <option :value="20">20条/页</option>
        </select>
      </div>
    </div>

    <!-- 新建供应商 -->
    <div v-if="showCreate" class="create-modal">
      <div class="modal-overlay" @click="closeCreate"></div>
      <div class="modal-content">
        <div class="modal-header">
          <span class="modal-title">新增客户</span>
          <button class="close-btn" @click="closeCreate">×</button>
        </div>
        <div class="modal-body">
          <div class="form-row">
            <div class="form-group">
              <label class="required">客户名称</label>
              <input type="text" v-model="createForm.supplierName" placeholder="请输入客户名称" maxlength="100">
            </div>
            <div class="form-group">
              <label>联系人</label>
              <select v-model="createForm.uId">
                <option value="">请选择联系人</option>
                <!-- 这里可以添加联系人选项 -->
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>联系人职位</label>
              <input type="text" v-model="createForm.contactPosition" placeholder="如：销售经理" maxlength="50">
            </div>
            <div class="form-group">
              <label>联系电话</label>
              <input type="text" v-model="createForm.contactPhone" placeholder="手机或座机" maxlength="20">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>微信</label>
              <input type="text" v-model="createForm.wechat" placeholder="微信号" maxlength="50">
            </div>
            <div class="form-group">
              <label>邮箱</label>
              <input type="email" v-model="createForm.email" placeholder="邮箱地址" maxlength="100">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>详细地址</label>
              <input type="text" v-model="createForm.address" placeholder="详细地址" maxlength="200">
            </div>
            <div class="form-group">
              <label>开户行</label>
              <input type="text" v-model="createForm.bankName" placeholder="开户行名称" maxlength="100">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group">
              <label>银行账号</label>
              <input type="text" v-model="createForm.bankAccount" placeholder="银行账号" maxlength="50">
            </div>
            <div class="form-group">
              <label>备注</label>
              <textarea v-model="createForm.remark" placeholder="备注信息" rows="3" maxlength="200"></textarea>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn-cancel" @click="closeCreate" :disabled="createLoading">取消</button>
          <button class="btn-save" @click="submitCreate" :disabled="createLoading">
            {{ createLoading ? '保存中...' : '保存' }}
          </button>
        </div>
      </div>
    </div>

    <!-- 查看详情 - 右侧抽屉 -->
    <div v-if="showDetail" class="drawer-mask" @click="showDetail=false">
      <div class="drawer" @click.stop>
        <div class="drawer-header">
          <span>供应商详情</span>
          <button class="modal-close" @click="showDetail=false">×</button>
        </div>
        <div class="drawer-body" v-if="detailData">
          <!-- 基本信息 -->
          <div class="detail-section">
            <h3>基本信息</h3>
            <div class="detail-form">
              <div class="form-field">
                <label>供应商编号</label>
                <input type="text" :value="detailData.supplierCode || '-'" readonly>
              </div>
              <div class="form-field">
                <label>供应商名称</label>
                <input type="text" :value="detailData.supplierName || '-'" readonly>
              </div>
              <div class="form-field" style="grid-column: span 2">
                <label>详细地址</label>
                <input type="text" :value="detailData.address || '-'" readonly>
              </div>
            </div>
          </div>

          <!-- 对接人信息 -->
          <div class="detail-section">
            <h3>对接人信息</h3>
            <div class="detail-form">
              <div class="form-field">
                <label>联系人</label>
                <input type="text" :value="detailData.contactPersonName || '-'" readonly>
              </div>
              <div class="form-field">
                <label>职位</label>
                <input type="text" :value="detailData.contactPosition || '-'" readonly>
              </div>
              <div class="form-field">
                <label>联系电话</label>
                <input type="text" :value="detailData.contactPhone || '-'" readonly>
              </div>
              <div class="form-field">
                <label>微信</label>
                <input type="text" :value="detailData.wechat || '-'" readonly>
              </div>
              <div class="form-field" style="grid-column: span 2">
                <label>邮箱</label>
                <input type="text" :value="detailData.email || '-'" readonly>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { supplierPendingPage, supplierPendingDetail, supplierCreate } from '@/api/finance/supplierPending'
export default {
  name: 'SuppliersToBeReconciled',
  data() {
    return {
      suppliers: [],
      page: 1,
      pageSize: 5,
      total: 0,
      pages: 1,
      query: { supplierName: '', startDate: '', endDate: '' },
      createForm: {
        supplierName: '',
        supplierCode: '',
        uId: null,
        contactPosition: '',
        contactPhone: '',
        wechat: '',
        email: '',
        address: '',
        bankName: '',
        bankAccount: '',
        remark: ''
      },
      showCreate: false,
      showDetail: false,
      detailData: null,
      createLoading: false
    };
  },
  computed: {
    allSelected: {
      get() {
        return this.suppliers.length > 0 && this.suppliers.every(item => item.selected);
      },
      set(value) {
        this.suppliers.forEach(item => {
          item.selected = value;
        });
      }
    }
  },
  mounted() {
    this.fetchList();
  },
  methods: {
    async fetchList() {
      const req = { pageNum: this.page, pageSize: this.pageSize, ...this.query };
      const res = await supplierPendingPage(req);
      const payload = res?.data || {};
      const data = payload.data || payload; // 兼容 {code,msg,data} 包装
      const pageData = data.records || [];
      this.total = data.total || 0;
      this.pages = data.pages || Math.ceil(this.total / this.pageSize) || 1;
      this.suppliers = pageData.map(it => ({ ...it, selected: false }));
    },
    resetQuery() {
      this.query = { supplierName: '', startDate: '', endDate: '' };
      this.page = 1;
      this.fetchList();
    },
    changePage(p) {
      if (p < 1 || p > this.pages) return;
      this.page = p;
      this.fetchList();
    },
    changePageSize() {
      this.page = 1;
      this.fetchList();
    },
    async viewDetail(row) {
      const res = await supplierPendingDetail(row.id);
      const payload = res?.data || {};
      this.detailData = payload.data || payload;
      this.showDetail = true;
    },
    closeCreate() {
      this.showCreate = false
      this.resetCreateForm()
    },
    resetCreateForm() {
      this.createForm = {
        supplierName: '',
        supplierCode: '',
        uId: null,
        contactPosition: '',
        contactPhone: '',
        wechat: '',
        email: '',
        address: '',
        bankName: '',
        bankAccount: '',
        remark: ''
      }
    },
    async submitCreate() {
      this.createLoading = true
      try {
        // 数据验证
        if (!this.createForm.supplierName?.trim()) {
          alert('请输入客户名称')
          this.createLoading = false
          return
        }

        const payload = { ...this.createForm }
        const { data } = await supplierCreate(payload)
        if (data?.code === 200) {
          alert('客户创建成功！')
          this.closeCreate()
          this.fetchList()
        } else {
          alert('创建失败: ' + (data?.msg || '未知错误'))
        }
      } catch (error) {
        console.error('创建失败:', error)
        alert('创建失败: ' + error.message)
      } finally {
        this.createLoading = false
      }
    }
  }
}
</script>

<style scoped>
/* 新建模态框样式 */
.create-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-content {
  position: relative;
  background: white;
  border-radius: 4px;
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header {
  background: lightskyblue;
  color: white;
  padding: 16px 20px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title {
  font-size: 16px;
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.modal-body {
  padding: 20px;
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 14px;
  color: #333;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-group label.required {
  color: #f56c6c !important;
}

.form-group label.required::after {
  content: " *";
  color: #f56c6c !important;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
  background: white;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 80px;
}

.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.btn-cancel {
  padding: 8px 20px;
  border: 1px solid #d9d9d9;
  background: white;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.btn-cancel:hover:not(:disabled) {
  border-color: #40a9ff;
  color: #1890ff;
}

.btn-save {
  padding: 8px 20px;
  border: none;
  background: #1890ff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.btn-save:hover:not(:disabled) {
  background: #40a9ff;
}

.btn-cancel:disabled,
.btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 右侧抽屉 */
.drawer-mask { position: fixed; inset:0; background: rgba(0,0,0,0.35); display:flex; justify-content:flex-end; align-items:stretch; z-index:1000; }
.drawer { width: 520px; max-width:85vw; height:100%; background:#fff; box-shadow:-2px 0 12px rgba(0,0,0,0.1); display:flex; flex-direction:column; animation: slideInRight 0.25s ease-out; }
.drawer-header { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; border-bottom:1px solid #ebeef5; background:#ffffff; color:#303133; }
.drawer-header span { color:#303133; }
.modal-close { color:#909399; }
.modal-close:hover { background-color: rgba(0,0,0,0.05); color:#606266; }
.drawer-body { padding:16px; overflow:auto; }
.detail-section { margin-bottom: 24px; }
.detail-section h3 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #409eff; font-size: 16px; font-weight: 600; color:#303133; }
.detail-form { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display:flex; flex-direction:column; gap:8px; }
.form-field label { font-weight:500; color:#606266; font-size:14px; }
.form-field input { padding:10px 12px; border:1px solid #dcdfe6; border-radius:4px; background-color:#f5f7fa; color:#606266; }
.form-field input:read-only { background-color:#f5f7fa; cursor:not-allowed; }
@keyframes slideInRight { from { transform: translateX(100%);} to { transform: translateX(0);} }
.detail-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px 16px; }
.suppliers-container {
  padding: 20px;
  background-color: #f5f7fa;
}

.controls-section {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
  align-items: center;
}

.btn-new {
    background-color: #1890ff;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    height: 32px;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-item label {
  font-size: 14px;
  white-space: nowrap;
}

.filter-item input, .filter-item select {
  padding: 8px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  width: 150px;
}

.actions {
  margin-left: auto;
}

.btn-primary {
  background-color: #1890ff;
  color: white;
  border: none;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 32px;
}

.btn-secondary {
  background-color: #fff;
  color: #333;
  border: 1px solid #d9d9d9;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  height: 32px;
  margin-left: 10px;
}

.table-section {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #ebeef5;
}

th {
  background-color: #f8f9fa;
}

.link-style {
    color: #409eff;
    cursor: pointer;
}

.footer-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background-color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pagination button {
  padding: 6px 12px;
  border: 1px solid #dcdfe6;
  background-color: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination button.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination select {
  padding: 6px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
</style>
